<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-40" style="height: 100rpx;">
			<tabbar type="1"></tabbar>
			<view class="flex aic">
				<view class="gray272 bold500 f30 over" style="width: 200rpx;">...{{jiequten(getLoginInfo.user)}}</view>
				<!-- <view class="bg-272 bra60 fcc rel" style="padding: 15rpx 20rpx;" @click="show = !show">
					<view class="mg-r-10 fff">{{tab[flag]}}</view>
					<image src="/static/image/3.png" style="width:30rpx;height:30rpx" class=""></image>
					<view class="one1 bg-272 bra30" v-if="show">
						<view class="mg-b-30 fcc" v-for="(it,i) in tab" :key="i" @click.stop="dianji(i)">
							<view class="fff mg-r-10">{{it}}</view>
							<image src="/static/image/4.png" style="width:30rpx;height:25rpx" class="" v-if="i == flag"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="he3 w100pc"></view>
		<!-- 轮播 -->
		<u-swiper :list="list" height="400" :effect3d="true" border-radius="20"></u-swiper>
		<view class="he4 w100pc"></view>
		<view class="lrmg-40 bg-272 tmpadd-20 fcc bra20" @tap="pageto('/pages/otc/order')">
			<image src="/static/image/12.png" style="width:48rpx;height:59rpx" class=""></image>
			<view class="f30 fff mg-l-30">我的訂單明细</view>
		</view>
		<view class="lrmg-40">
			<view class="middle mg-t-30">
				<view class="flex aic bra20" style="padding: 20rpx;background: #FEC94F;">
					<image src="/static/tab/4s.png" style="width:60rpx;height:60rpx" class=""></image>
					<view class="fff mg-l-30 f26">用戶名稱</view>
				</view>
				<view class="" style="padding: 30rpx 20rpx 40rpx 15rpx">
					<view class="flex aic">
						<view class="grayc4 f26">數量</view>
						<view class="weight f26 gray333 mg-l-30">3133347.00 USDT</view>
					</view>
					<view class="flex jsb al-end">
						<view class="flex aic">
							<view class="grayc4 f26">限額</view>
							<view class="weight f26 gray333 mg-l-30">100000-200000 CNY</view>
						</view>
						<view class="fdc al-end mg-r-30">
							<view class="gray999 f26 weight">單價  USD</view>
							<view class="f40 weight gray333 mg-t-20">6.45</view>
						</view>
					</view>
					<view class="fsb mg-t-40">
						<view class="flex aic">
							<image src="/static/tab/4s.png" style="width:60rpx;height:60rpx" class="mg-r-20"></image>
							<image src="/static/tab/4s.png" style="width:60rpx;height:60rpx" class="mg-r-20"></image>
							<image src="/static/tab/4s.png" style="width:60rpx;height:60rpx" class="mg-r-20"></image>
						</view>
						<u-button type="primary" :ripple="true" :custom-style="customStyles" @tap="goumai">購買</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 購買 -->
		<u-popup v-model="showtab" mode="bottom" :mask-close-able="true" :border-radius="20">
			<view style="background: #fff;padding: 50rpx;">
				<view class="flex aic">
					<image src="/static/tab/4s.png" style="width:70rpx;height:70rpx" class=""></image>
					<view class="mg-l-30">
						<view class="f30 weight" style="color: #131519;">購買 MMST</view>
						<view class="flex aic mg-t-10">
							<view class="f22" style="color: #1D426E;">單價$7.21</view>
							<view class="f22 mg-l-20" style="color: #68696D;">00:43s 刷新</view>
						</view>
					</view>
				</view>
				<view class="gray272 weight f30 mg-t-40">按金額購買</view>
				<view class="mg-t-40 fsb" style="border-bottom: 1px solid rgba(0, 0, 0, .1);height: 100rpx;">
					<input type="text" placeholder="0.00" placeholder-class="gray999 f44" style="" class="f44 gray272" />
					<view class="flex aic">
						<view class="f30 mg-r-20" style="color: #131519;">USD</view>
						<view class="f30" style="color: #1D426E;">全部</view>
					</view>
				</view>
				<view class="mg-t-20 gray999 f22">限額: $20,000.00 - $20,000.00</view>
				<view class="flex aic mg-t-40">
					<view class="gray272 weight f30">可得</view>
					<view class="f36 gray999 mg-l-30 weight">0.00 MMST</view>
				</view>
				<view class="fsb mg-t-40" @click="show1 = true">
					<view class="" style="color: #131519;">支付方式</view>
					<view class="flex aic" style="color: #131519;">
						<view class="mg-r-10 yuan"></view>
						<view class="mg-r-10">USDT</view>
						<u-icon name="arrow-right" size="18" color="#333333"></u-icon>
					</view>
				</view>
				<view class="f24 grayc4 mg-t-20" style="text-align: right;">余额：10 USDT</view>
				<view class="he4 w100pc"></view>
				<u-button type="primary" :ripple="true" :custom-style="customStyle" @tap="goumai">提交</u-button>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="show1"  :default-selector="[0]" :range="selector1" @confirm="xuanze1"></u-picker>
	</view>
</template>

<script>
	var	that
	import tabbar from "../../components/tabbar/tabbar.vue"
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default{
		data(){
			return{
				show1: false,
				selector1: [1, 2, 3],
				customStyles: {
					color: '#000',
					background:'linear-gradient(0deg, #FFC84B 0%, rgba(252,219,149,0.97) 100%)',
					width:'155rpx',
					height:'61rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				customStyle: {
					color: '#000',
					background:'linear-gradient(0deg, #FFC84B 0%, rgba(252,219,149,0.97) 100%)',
					width:'100%',
					height:'80rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				showtab:false,
				tab:['中文繁体','English'],
				flag:0,
				show:false,
				list: [{
						image: '/static/image/2.png'
					},
					{
						image: '/static/image/2.png'
					},
					{
						image: '/static/image/2.png'
					}
				],
			}
		},
		components:{
			tabbar
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		onLoad() {
			that = this
		},
		onShow() {
			if(this.getLangType == 'chs'){
				this.flag = 0
			}else{
				this.flag = 1
			}
		},
		methods:{
			//截取后10位
			jiequten(e){
				var disName = e;
				var dateLength = disName.length;
				var key = disName.substring(dateLength-10,dateLength);
				return key
			},
			...mapMutations([
				'setGgsxq',
				'setLoginInfo',
				'setLogin',
				'setLoginTime',
				'setLangType',
				'setAreas'
			]),
			xuanze1(e){
				console.log(e);
			},
			goumai(){
				that.showtab = !that.showtab
			},
			dianji(e){
				that.flag = e
				that.show = !that.show
				if(e == 0){
					this.setLangType('chs')
					this.$i18n.locale = 'chs'
					console.log('设置中文');
				}else if(e == 1){
					this.setLangType('en')
					this.$i18n.locale = 'en'
					console.log('设置英文');
				}
			},
			geTel(tel){
			    var reg = /^(\d{3})\d{4}(\d{4})$/;  
			    return tel.replace(reg, "$1****$2");
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
		}
	}
</script>

<style lang="scss">
	.yuan{
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(0deg, #FFCA7F 0%, #FFA54A 100%);
		border-radius: 50%;
	}
	.middle{
		background: #FFFFFF;
		box-shadow: 0px 0px 31rpx 1rpx rgba(15,6,10,0.13);
		border-radius: 20rpx;
	}
	.one1{
		padding: 30rpx 20rpx 0rpx;
		position: absolute;
		left: 0;
		top: 80rpx;
		z-index: 999;
	}
</style>